import {
  getThesisNumberByClass,
  getUnSubmitPeopleByClass,
  queryUnSubmitPeople,
} from '@/services/ThesisManage/thesisStatistics/ThesisController';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { Col, Row } from 'antd';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts/lib/echarts';
import 'echarts/theme/macarons';
import { useEffect, useRef, useState } from 'react';
import { thesisCountOption, unSubmitOption } from './constants/constants';

const ThesisStatistics = () => {
  const modalFormRef = useRef(null);
  const tableRef = useRef(null);
  const echarts1 = useRef(null);
  const echarts2 = useRef(null);
  const [option1, setOption1] = useState(thesisCountOption);
  const [option2, setOption2] = useState(unSubmitOption);
  useEffect(() => {
    initEcharts();
  }, []);

  const onChart1Ready = (echartsInstance) => {
    console.log('看看', echartsInstance);
    echarts1.current = echartsInstance;
  };
  const onChart2Ready = (echartsInstance) => {
    echarts2.current = echartsInstance;
  };

  const initEcharts = async () => {
    const { thesisNumberList, classNameList } = await getThesisNumber();
    const unSubmitPeopleList = await getUnSubmitPeople();
    const newOption1 = { ...thesisCountOption };
    newOption1.xAxis.data = classNameList;
    newOption1.series[0].data = thesisNumberList;
    setOption1(newOption1);
    const newOption2 = { ...unSubmitOption };
    newOption2.series[0].data = unSubmitPeopleList;
    setOption2(newOption2);
    echarts1.current.setOption(newOption1);
    echarts2.current.setOption(newOption2);
  };

  const getThesisNumber = async () => {
    const res = await getThesisNumberByClass();
    if (res.code === 200) {
      return res.data;
    }
  };

  const getUnSubmitPeople = async () => {
    const res = await getUnSubmitPeopleByClass();
    if (res.code === 200) {
      return res.data;
    }
  };

  const columns = [
    {
      title: '学生姓名',
      dataIndex: 'name',
      hideInTable: true,
    },
    {
      title: '学号',
      dataIndex: 'js_number',
      hideInTable: true,
    },
    {
      title: '班级名称',
      dataIndex: 'class_name',
      hideInTable: true,
    },
    {
      title: '序号',
      dataIndex: 'id',
      hideInSearch: true,
      width: 60,
      render: (text, record, index) => {
        return index + 1;
      },
    },
    {
      title: '学生姓名',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '学号',
      dataIndex: 'js_number',
      hideInSearch: true,
    },
    {
      title: '班级名称',
      dataIndex: 'class',
      hideInSearch: true,
      render: (value, record, index) => {
        return value[0].class_name;
      },
    },
  ];
  return (
    <PageContainer>
      <Row>
        <Col span={12}>
          <ReactEcharts
            option={option1}
            echarts={echarts}
            theme="walden"
            lazyUpdate={true}
            onChartReady={onChart1Ready}
            style={{ height: '300px', width: '500px' }}
          />
        </Col>
        <Col span={12}>
          <ReactEcharts
            option={option2}
            echarts={echarts}
            theme="walden"
            lazyUpdate={true}
            onChartReady={onChart2Ready}
            style={{ height: '300px', width: '500px' }}
          />
        </Col>
      </Row>
      <div
        style={{
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bolder',
          fontFamily: 'sans-serif',
          fontSize: '18px',
          marginTop: '20px',
        }}
      >
        未提交学生
      </div>
      <ProTable
        actionRef={tableRef}
        // bordered
        rowKey="id"
        columns={columns}
        pagination={{
          pageSize: 10,
        }}
        toolBarRender={false}
        request={async (params) => {
          const { current, pageSize, ...restParams } = params;
          const res = await queryUnSubmitPeople({
            ...restParams,
          });
          if (res?.code === 200) {
            return {
              total: res?.data?.length,
              data: res?.data,
              success: true,
            };
          }
          return {
            success: false,
          };
        }}
        search={{ labelWidth: 'auto' }}
      />
    </PageContainer>
  );
};

export default ThesisStatistics;
